<template>
    <div class="bread" :title="title" :desc="desc">
        <h1>{{ title }}</h1>
        <h6>{{ desc }}</h6>
    </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    desc: { type: String, required: true }
  }
}
</script>

<style lang="stylus">
.bread {
        height: 42px;
        line-height: 42px;
        background: #fff;
        text-align: left;
        padding-left: 26px;
        overflow: hidden;
        border-bottom: 1px solid #e8e8e8;
        z-index: 1;
        display: flex;
        align-items: center;
        margin: 12px 24px 0 24px;
        position: relative;

        h6 {
            font-size: 12px;
            color: #bfbfbf;
            margin-left: 22px;
        }

        h1 {
            color: #3b3b3b;
            font-size: 18px;
            font-weight: bold;
        }
    }
</style>
